<!-- 商户申请审核 -->
<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="处理状态" prop="orderStatus">
          <el-select v-model="queryParams.status" placeholder="请选择" clearable style="width: 240px">
            <el-option v-for="item in Object.values(STATUS_LIST_OBJECT)" :key="item.value" :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="initList">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-tabs v-model="queryParams.source" class="demo-tabs pl-3 bg-white" @tab-change="handleTabClick">
      <el-tab-pane label="文章" :name="1"></el-tab-pane>
      <el-tab-pane label="评论" :name="2"></el-tab-pane>
    </el-tabs>
    <div class="table-container bg-white">
      <base-page-table :table-data="tableData" :table-columns-data="tableColumnsData" :loading="loading"
        :page-num="queryParams.pageNum" :page-size="queryParams.pageSize" :total="queryParams.total"
        @handleQuery="handleQuery">
        <template #index="scope">
          {{ scope.index + 1 }}
        </template>
        <!-- <template #orderStatus="scope">
        <el-tag v-if="scope.row.orderStatus == 1" type="success" class="margin-r-10">通过</el-tag>
        <el-tag v-if="scope.row.status == 2" type="danger" class="margin-r-10">驳回</el-tag>
        <el-tag v-if="scope.row.status == 0" type="warning">未审核</el-tag>
      </template> -->
        <template #status="scope">
          <el-tag :type="KEY_STATUS_OBJECT[scope.row.status].type" class="margin-r-10">
            {{ KEY_STATUS_OBJECT[scope.row.status].label }}
          </el-tag>
        </template>
        <template #files="scope">
          <el-image :src="handleImageUrl(scope.row.files)" style="width: 100px; height: 100px" />
        </template>
        <template #action="scope">
          <el-button link type="primary" @click="openReport(scope.row)">处理</el-button>
          <el-button link type="primary" @click="toDetail(scope.row)">查看内容</el-button>
        </template>
      </base-page-table>
    </div>
    <DialogFeedbackInfo ref="dialogFeedbackInfoRef" @refresh="initList" />
  </div>
</template>
<script setup>
import { articleType } from "@/enums/aritcle/aritcle";
import DialogFeedbackInfo from "./DIalogFeedbackInfo.vue";
import { useRouter } from "vue-router";
const router = useRouter();
import {
  ArticleTableColumnsData,
  CommentTableColumnsData,
  KEY_STATUS_OBJECT,
  STATUS_LIST_OBJECT,
  SOURCE_LIST_OBJECT,
} from "./until/enum";
import FeedbackAPI from "@/api/feedback";
const queryParams = reactive({
  status: undefined,
  source: 1,
  pageNum: 1,
  pageSize: 20,
  total: 0,
});
const queryFormRef = ref();
const tableData = ref([]);
const tableColumnsData = ref(ArticleTableColumnsData);
/**
 * 请求相关
 *
 */
//获取入驻申请列表
const loading = ref(false);
const funcGetList = async () => {
  try {
    loading.value = true;
    let params = {
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize,
      source: queryParams.source,
    };
    if (queryParams.status !== undefined) {
      params.status = queryParams.status;
    }
    const res = await FeedbackAPI.getFeedbackList(params);
    tableData.value = res.data;
    queryParams.total = res.total;
    // 刷新列表
  } catch (err) {
    console.log(err);
  } finally {
    loading.value = false;
  }
};
function handleTabClick(val) {
  if (val === SOURCE_LIST_OBJECT.article.value) {
    tableColumnsData.value = ArticleTableColumnsData;
  } else {
    tableColumnsData.value = CommentTableColumnsData;
  }
  initList();
}
function handleResetQuery() {
  queryParams.status = undefined;
  initList();
}
function handleQuery(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  funcGetList();
}
function initList() {
  queryParams.pageNum = 1;
  funcGetList();
}
const dialogFeedbackInfoRef = ref();
function openReport(row) {
  dialogFeedbackInfoRef.value.openModal(row);
}
function handleImageUrl(files) {
  try {
    return JSON.parse(files)[0].url;
  } catch (err) {
    return "";
  }
}
function toDetail(row) {
  let path = "";
  if (row.articleType == articleType.DECORATION.type) {
    path = "/decorationExample";
  } else {
    path = "/decorationDiary";
  }
  router.push({
    path: path,
    query: {
      id: row.articleId,
    },
  });
}
onMounted(() => {
  funcGetList();
});
</script>
<style lang="scss" scoped>
.table-container {
  flex: 1;
  height: 100%;
}
</style>
